﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>遮罩层测试</title>
 
    <script type="text/javascript">
        function ShowCancle() //隐藏两个层 
        {
            document.getElementById("doing").style.display = "none";
            document.getElementById("divLogin").style.display = "none";
        }
        function $(id) {
            return (document.getElementById) ? document.getElementById(id) : document.all[id];
        }
        function showFloat() //根据屏幕的大小显示两个层 
        {
            var range = getRange();
            $('doing').style.width = range.width + "px";
            $('doing').style.height = range.height + "px";
            $('doing').style.display = "block";
            document.getElementById("divLogin").style.display = "";
        }
        function getRange() //得到屏幕的大小 
        {
            var top = document.body.scrollTop;
            var left = document.body.scrollLeft;
            var height = document.body.clientHeight;
            var width = document.body.clientWidth;

            if (top == 0 && left == 0 && height == 0 && width == 0) {
                top = document.documentElement.scrollTop;
                left = document.documentElement.scrollLeft;
                height = document.documentElement.clientHeight;
                width = document.documentElement.clientWidth;
            }
            return { top: top, left: left, height: height, width: width };
        } 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="margin-left: 350px; margin-top: 50px; width: 150px;">
        <span><a href="javascript:void(0)" onclick="showFloat()">登陆</a>//登录链接</span>
    </div>
    <!--加一个半透明层-->
    <div id="doing" style="filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3;
        background-color: #000; width: 100%; height: 100%; z-index: 1000; position: absolute;
        left: 0; top: 0; display: none; overflow: hidden;">
    </div>
    <!--加一个登录层       -->
    <div id="divLogin" style="border: solid 10px #898989; background: #fff; padding: 10px;  display: none;
         width: 400px; z-index: 1001; position: absolute; top: 50%; left: 50%;
        margin: -200px 0 0 -400px;">
        <table border="0"cellpadding="0" cellspacing="0" width="380px">
            <tr>
                <td align="right">
                    登录名:
                </td>
                <td align="left">
                    <input id="TxtUserName" type="text" name="TxtUserName" runat="server" />
                </td>
                <td align="left">
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="登录名不能为空!"
                        ControlToValidate="TxtUserName" Display="Static" ForeColor="Red"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td align="right">
                    密 码:
                </td>
                <td align="left">
                    <input id="TxtUserPwd" type="password" name="TxtUserPwd" runat="server" />
                </td>
                <td align="left">
                  
                </td>
            </tr>
            <tr>
                <td align="right">
                </td>
                <td align="left">
                    <asp:Button ID="BttLogin" runat="server" Text="登陆" OnClick="BttLogin_Click" />
                    &nbsp;<input id="BttCancel" type="button" value="取消 " onclick="ShowCancle()" />
                </td>
                <td align="left">
                </td>
            </tr>
        </table>
    </div>
    <div>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </div>
    </form>
</body>
</html>
